<template>
	<view>
		<view class="car-input-container">
			<view class="car-input-box" v-for="(item,index) in inputList" :key="index" @click="plateInput(index)">
				<view class="car-input-item"
					:class="[curInput == index?'sel-item':'',(maxNum-1) == index?'last-item':'',index===7?'last':'']">
					<!-- ,curInput==index?'selt':'' -->
					<view :class="curInput == index?'sel-item-line':''">
					</view>
					<!-- <img :src="xnyImgBase64" class="new-item-img" v-if="(maxNum-1) == index" /> -->

					<view v-if="index==7&&isshow" class="lasttxt">新能源</view>
					<view class="" v-else>
						{{item===""?'':item}}
					</view>
				</view>
			</view>
		</view>

		<view :class="['car-number-container',isbom?'car-bom':'']" v-if="showKeyPop1">
			<view class="plate-close" @click="closeKeyboard"><text class="plate-close-btn">关闭</text></view>
			<view class="plate-popup-list">
				<view class="plate-popup-item province-item" v-for="(item,index) in keyProvince1" :key="index"
					@click="tapKeyboard(item)">{{item}}</view>
			</view>
			<view class="plate-popup-list">
				<view class="plate-popup-item province-item" v-for="(item,index) in keyProvince2" :key="index"
					@click="tapKeyboard(item)">{{item}}</view>
			</view>
			<view class="plate-popup-list">
				<view class="plate-popup-item province-item" v-for="(item,index) in keyProvince3" :key="index"
					@click="tapKeyboard(item)">{{item}}</view>
			</view>
			<view class="plate-popup-list">
				<view class="plate-popup-item province-item" v-for="(item,index) in keyProvince4" :key="index"
					@click="tapKeyboard(item)">{{item}}</view>
				<!-- 删除 -->
				<view class="plate-popup-item province-item del" @click="onPlateDelTap">
					<image :src="deleteImgBase64" />
				</view>
			</view>
		</view>

		<!-- ,isbom?'car-bom':'' -->
		<view :class="['car-number-container',isbom?'car-bom':'']" v-if="showKeyPop2">
			<view class="plate-close" @click="closeKeyboard"><text class="plate-close-btn">关闭</text></view>
			<view class="plate-popup-list">
				<view class="plate-popup-item" :class="lockInput.includes(item)?'lock-item':''"
					v-for="(item,index) in keyEnInput1" :key="index" @click="tapKeyboard(item)">
					{{item}}
				</view>
			</view>
			<view class="plate-popup-list">
				<view class="plate-popup-item" :class="lockInput.includes(item)?'lock-item':''"
					v-for="(item,index) in keyEnInput2" :key="index" @click="tapKeyboard(item)">
					{{item}}
				</view>
			</view>
			<view class="plate-popup-list">
				<view class="plate-popup-item" :class="lockInput.includes(item)?'lock-item':''"
					v-for="(item,index) in keyEnInput3" :key="index" @click="tapKeyboard(item)">
					{{item}}
				</view>
			</view>
			<view class="plate-popup-list">
				<view class="plate-popup-item" :class="lockInput.includes(item)?'lock-item':''"
					v-for="(item,index) in keyEnInput4" :key="index" @click="tapKeyboard(item)">
					{{item}}
				</view>
				<!-- 删除 -->
				<view class="plate-popup-item del" @click="onPlateDelTap">
					<image :src="deleteImgBase64" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'car-number-input',
		emits: ['numberInputResult'],
		props: {
			defaultStr: {
				type: String,
				default: ''
			},
			plateNum: {
				type: String,
				default: ''
			},
			// maxNum: {
			// 	type: Number,
			// 	default: 8
			// },
			isbom: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				isshow: true,
				inputList: [" ", " ", " ", " ", " ", " ", " ", " "],
				curInput: -1,
				maxNum: 8,
				showKeyPop1: false,
				showKeyPop2: false,
				keyProvince1: ['京', '津', '晋', '冀', '蒙', '辽', '吉', '黑', '沪'],
				keyProvince2: ['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘'],
				keyProvince3: ['粤', '桂', '琼', '渝', '川', '贵', '云', '藏'],
				keyProvince4: ['陕', '甘', '青', '宁', '新', 'W'],
				keyEnInput1: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
				keyEnInput2: ["Q", "W", "E", "R", "T", "Y", "U", "P", "学", "军"],
				keyEnInput3: ["A", "S", "D", "F", "G", "H", "J", "K", "L", "警"],
				keyEnInput4: ["Z", "X", "C", "V", "B", "N", "M", "港", "澳"],
				lockInput: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
				xnyImgBase64: "",
				deleteImgBase64: ""

			}
		},
		watch: {
			inputList(val) {

			},
			defaultStr(val) {
				if (val != "" && val != null) {
					const valList = val.split("")
					for (let i in valList) {
						this.inputList[i] = valList[i]
					}
				}
			},
			curInput(val) {
				this.showOrHidePop(val)

				this.keyEnInput2 = ["Q", "W", "E", "R", "T", "Y", "U", "O", "P", "军"]
				switch (val) {
					case 1:
						this.lockInput = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "学", "军", "警", "港", "澳"]
						break
					case 2:
						this.lockInput = ["O", "学", "军", "警", "港", "澳"]
						break
					case 3:
						this.lockInput = ["O", "学", "军", "警", "港", "澳"]
						break
					case 4:
						this.lockInput = ["O", "学", "军", "警", "港", "澳"]
						break
					case 5:
						this.lockInput = ["O", "学", "军", "警", "港", "澳"]
						break
					case 6:
						this.lockInput = ["O"]
						this.keyEnInput2 = ["Q", "W", "E", "R", "T", "Y", "U", "P", "学", "军"]
						break
					case 7:
						this.lockInput = ["O", "学", "军", "警", "港", "澳"]
						break
					default:
						this.lockInput = []
						break
				}
			}
		},
		created() {
			if (this.defaultStr != "" && this.defaultStr != null) {
				const valList = this.defaultStr.split("")
				for (let i in valList) {
					this.inputList[i] = valList[i]
				}

				// if (valList[0]) {
				// 	this.showKeyPop1 = false
				// }
			}
		},
		methods: {
			plateInput(e) {
				this.curInput = e
				this.showOrHidePop(e)
				// console.log('ind', e, typeof this.inputList[7]);
				// console.log('cur', this.inputList[7]);
			},
			showOrHidePop(val) {
				if (val == -1) {
					this.showKeyPop1 = false
					this.showKeyPop2 = false
				} else if (val == 0) {
					this.showKeyPop1 = true
					this.showKeyPop2 = false
				} else {
					this.showKeyPop1 = false
					this.showKeyPop2 = true
				}

			},
			tapKeyboard(e) {
				if (this.lockInput.includes(e)) {
					return
				}

				this.inputList[this.curInput] = e
				if (this.curInput < this.maxNum - 1) {
					this.curInput++
					this.isshow = true
				} else {
					this.curInput = -1
					this.isshow = false
				}

				// console.log('this.curInput', this.curInput, this.inputList[7]);

				this.emitResult()
			},
			closeKeyboard() {
				this.curInput = -1
			},
			onPlateDelTap() {
				console.log('e', this.curInput, this.inputList[7]);
				if (this.inputList[this.curInput] == " ") {
					this.curInput--
				}
				this.inputList[this.curInput] = " "

				this.isshow = true
				this.emitResult()
			},
			emitResult() {
				let returnResult = this.inputList.join("").trim()

				this.$emit('numberInputResult', returnResult);
				this.$forceUpdate()
			}
		}
	};
</script>

<style scoped lang="scss">
	.car-input-container {
		position: relative;
		// padding: 0 5px;
		height: 44px;

		.car-input-box:nth-of-type(1) {
			.car-input-item {
				// margin-left: 0;
			}

		}

		.selt {
			border: 1px solid #007EFF;
		}

		.car-input-box {
			display: inline-block;
			width: 12.5%;
			height: 100rpx;
			vertical-align: middle;

			.car-input-item {
				position: relative;
				// border: 1px solid #E2E2E2;
				height: 100rpx;
				line-height: 100rpx;
				width: 88%;
				margin-left: 12.5%;

				background: #F8F9FB;
				border-radius: 7rpx;
				text-align: center;
				font-size: 17px;

				.sel-item-line {
					position: absolute;
					bottom: 0px;
					// left: 15%;
					left: 0;
					height: 2px;
					// background-color: #2979ff;
					border: 1px solid #007EFF;
					// width: 70%;
					width: 100%;
					height: 100%;
					border-radius: 7rpx;
				}

				.new-item-img {
					position: absolute;
					top: -6px;
					left: 50%;
					margin-left: -15px;
					height: 13px;
					width: 30px;
					z-index: 9;
				}
			}

			.sel-item {
				// color: #2979ff;
			}

			.last-item {
				border: 1px dashed #42D3AD;
			}

			.last {
				background: rgba(66, 211, 173, .2);
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.lasttxt {
				width: 23rpx;
				height: 75rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #2EBB96;
				line-height: 24rpx;
			}
		}
	}

	.car-bom {
		bottom: 50px !important;
	}

	.car-number-container {
		position: fixed;
		z-index: 999;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 254px;
		background-color: #E3E2E7;
		-webkit-box-shadow: 0 0 30upx rgba(0, 0, 0, 0.1);
		box-shadow: 0 0 30upx rgba(0, 0, 0, 0.1);
		overflow: hidden;
		text-align: center;

		.plate-close {
			height: 40px;
			line-height: 40px;
			text-align: right;
			background-color: #FFF;

			.plate-close-btn {
				font-size: 13.5px;
				color: #555;
				margin-right: 15px;
			}
		}

		//键盘主体内容-单行
		.plate-popup-list {
			margin: 0 auto;
			overflow: hidden;
			display: inline-block;
			display: table;

			&:last-child {
				margin-bottom: 2px;
			}
		}

		//键盘主体内容-单个
		.plate-popup-item {
			float: left;
			font-size: 16px;
			width: 8vw;
			margin: 0 1vw;
			margin-top: 8px;
			height: 40px;
			line-height: 40px;
			background: #FFFFFF;
			border-radius: 5px;
			color: #4A4A4A;

			image {
				width: 16px;
				height: 16px;
				margin: 12px auto;
			}
		}

		.plate-popup-item:active {
			background-color: #EAEAEA;
		}

		.province-item {
			width: 8.8vw;
		}

		.lock-item {
			color: #AAA;
		}
	}
</style>